<template>
	<view>
		<button
			class="btn"
			:class="[
				outline ? 'btn-outline-' + type : 'btn-' + type,
				disabled ? 'disabled' : '',
				mode !== 'normal' ? 'btn-' + mode : ''
			]"
			:hover-class="outline ? 'btn-outline-hover-' + type : 'btn-hover-' + type"
			:style="{
				width: $g.addUnit(width),
				height: $g.addUnit(height),
				lineHeight: $g.addUnit(height),
				borderRadius: $g.addUnit(borderRadius),
				fontSize: $g.addUnit(size),
				left: $g.addUnit(left)
			}"
			:loading="loading"
			:form-type="formType"
			:open-type="openType"
			@getuserinfo="bindgetuserinfo"
			@getphonenumber="bindgetphonenumber"
			@contact="bindcontact"
			@error="binderror"
			:disabled="disabled"
			@tap="handleClick"
		>
			<slot></slot>
		</button>
		<view v-if="mode !== 'normal'" :style="{ height: fillHeight }"></view>
	</view>
</template>

<script>
export default {
	name: 'pysButton',
	props: {
		//样式类型 primary
		type: {
			type: String,
			default: 'primary'
		},
		// 宽度 rpx或 %
		width: {
			type: [Number, String],
			default: '100%'
		},
		//高度 rpx
		height: {
			type: [Number, String],
			default: '88rpx'
		},
		left: {
			type: [Number, String],
			default: 'auto'
		},
		//字体大小 rpx
		size: {
			type: [Number, String],
			default: 30
		},
		// 圆角大小
		borderRadius: {
			type: [Number, String],
			default: 10
		},
		// 是否镂空
		outline: {
			type: Boolean,
			default: false
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 模式 normal正常 fixed-fill固定 fixed-box固定
		mode: {
			type: String,
			default: 'normal'
		},
		// 原生button属性
		loading: {
			type: Boolean,
			default: false
		},
		formType: {
			type: String,
			default: ''
		},
		openType: {
			type: String,
			default: ''
		},
		index: {
			type: [Number, String],
			default: 0
		},
		//是否需要阻止重复点击【默认200ms】
		preventClick: {
			type: Boolean,
			default: false
		},
		preventTime: {
			type: Number,
			default: 500
		}
	},
	data() {
		return {
			time: 0
		};
	},
	computed: {
		fillHeight() {
			if (this.mode === 'normal') {
				return '0';
			} else if (this.mode === 'fixed') {
				return this.$g.addUnit(this.height);
			} else if (this.mode === 'fixed-box') {
				return 'calc(40rpx + ' + this.$g.addUnit(this.height) + ')';
			}
		}
	},
	methods: {
		handleClick() {
			if (this.disabled) return;
			if (this.preventClick) {
				if (new Date().getTime() - this.time <= this.preventTime) return;
				this.time = new Date().getTime();
				setTimeout(() => {
					this.time = 0;
				}, this.preventTime);
			}
			this.$emit('click', {
				index: Number(this.index)
			});
		},
		bindgetuserinfo({ detail = {} } = {}) {
			this.$emit('getuserinfo', detail);
		},
		bindcontact({ detail = {} } = {}) {
			this.$emit('contact', detail);
		},
		bindgetphonenumber({ detail = {} } = {}) {
			this.$emit('getphonenumber', detail);
		},
		binderror({ detail = {} } = {}) {
			this.$emit('error', detail);
		}
	}
};
</script>

<style lang="scss" scoped>
.btn {
	width: 100%;
	position: relative;
}
.btn-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 88rpx;
	z-index: $z-index-fabtn;
}
.btn-fixed-box {
	position: fixed;
	bottom: 40rpx;
	z-index: $z-index-fabtn;
	box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn-primary {
	background-color: $type-primary;
	color: #ffffff;
}
.btn-outline-primary {
	border: 1px solid $type-primary;
	color: $type-primary;
}
.btn-hover-primary {
	background-color: $type-primary-dark;
}
.btn-outline-hover-primary {
	background-color: $type-primary;
	color: #ffffff;
}

.btn-warning {
	background-color: $type-warning;
	color: #ffffff;
}
.btn-outline-warning {
	border: 1px solid $type-warning;
	color: $type-warning;
}
.btn-hover-warning {
	background-color: $type-warning-hover;
}
.btn-outline-hover-warning {
	background-color: $type-warning;
	color: #ffffff;
}

.btn-white {
	background-color: #fff;
	color: $type-primary;
}
.btn-hover-white {
	background-color: $type-white-dark;
}

.btn.disabled {
	background-color: #aaa;
	border-color: #aaa;
	color: #fff;
}
</style>
